<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书馆登录首页面</title>

    <meta
            content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
            name="viewport">

    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
</head>

<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-logo">
        <h3>图书馆后台管理系统</h3>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
        <p class="login-box-msg">登录系统</p>

        <form action="${pageContext.request.contextPath}/user/login" method="post">
            <div class="form-group has-feedback">
                <div style="color: red;" id="checkUserName"></div>
                <input type="text" name="account" id="account" class="form-control"
                       placeholder="账号" onblur="checkUserName()"> <span
                    class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <div style="color: red;" id="checkUserPassword"></div>
                <input type="text" name="password" id="password" class="form-control"
                       placeholder="密码" onblur="checkPassword()"> <span
                    class="glyphicon glyphicon-lock form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <label>
                    <div style="color: red;" id="checkUserType"></div>
                    <select name="userType" id="userType" class="form-control" onblur="checkType()">
                        <option value="">请选择用户...</option>
                        <option value="管理员">管理员</option>
                        <option value="学生">学生</option>
                    </select>
                </label>
            </div>
            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                        <label><input type="checkbox"> 记住 下次自动登录</label>
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
                </div>
                <!-- /.col -->
            </div>
        </form>
        <a href="${pageContext.request.contextPath}/pages/student/forget-password.jsp">忘记密码</a><br>

    </div>
    <!-- /.login-box-body -->
</div>

<script
        src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script
        src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });

    function checkUserName() {
        let name = document.getElementById("account").value;
        if (name.length === 0) {
            document.getElementById("checkUserName").innerHTML = "用户名不为空!!!";
        } else {
            document.getElementById("checkUserName").innerHTML = "";
        }
    }

    function checkPassword() {
        let pwd = document.getElementById("password").value;
        if (pwd.length === 0) {
            document.getElementById("checkUserPassword").innerHTML = "密码不为空!!!";
        } else {
            document.getElementById("checkUserPassword").innerHTML = "";
        }
    }

    function checkType() {
        let type = document.getElementById("userType").value;
        if (type.length === 0) {
            document.getElementById("checkUserType").innerHTML = "请选择!!!";
        } else {
            document.getElementById("checkUserType").innerHTML = "";
        }
    }
</script>
</body>

</html>